<template>
	<view class="order_detail_box">
		<nav-bar title="订单详情" bgColor="#f5f5f5"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="order_status">{{ orderContents.orderStatusStr }}</view>
		<view class="shop_goods_box">
			<view v-if="module.shop && !orderContents.specialOrder" class="shop_info" @click="onPageJump('/pages/home/shop/shop?objId=' + orderContents.shopId)">{{ orderContents.shopName }}</view>
			<!-- 商品信息 -->
			<view class="goods_item" v-for="(item, index) of orderContents.goodsList" :key="index" @click="onPageJump('/pages/home/shop/goodsDetail?objId=' + item.goodsId)">
				<image class="goods_img" :src="item.goodsImg"></image>
				<view class="info_box">
					<view class="name">{{ item.goodsName }}</view>
					<view class="specification_num_box">
						<text class="specification">{{ item.goodsSpecName }}</text>
						<text class="num">{{ item.goodsNum }}</text>
					</view>
					<view class="price">
						<text>{{ item.goodsPrice }}</text>
						<view v-if="module.afterSale ">
							<text>{{item.goodsStatusStr}}</text>
							<button v-if="item.afterSaleBtn" @click.stop="onPageJump('/pages/my/order/afterSale?goodsId=' + item.goodsId + '&orderNo=' + orderNo + '&goodsSpecId=' + item.goodsSpecId)">
								申请售后
							</button>
							<button v-if="item.afterSaleCancleBtn" @click.stop="onCancelAfterSale(index)">取消售后</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order_info_box">
			<view class="cell_list line">
				<view class="cell_left">商品总价</view>
				<view class="cell_right">{{ orderContents.priceTotal }}</view>
			</view>
			<view class="cell_list">
				<view class="cell_left">运费</view>
				<view class="cell_right red" v-if="orderContents.priceLogistics == '¥ 0.0'">免运费</view>
				<view class="cell_right red" v-else>{{ orderContents.priceLogistics }}</view>
			</view>
			<view class="cell_list merge line">
				<view class="cell_left">优惠金额</view>
				<view class="cell_right red">-{{ orderContents.discounTotalPrice }}</view>
			</view>
			<view class="cell_list">
				<view class="cell_left">支付金额</view>
				<view class="cell_right red">¥{{ orderContents.payPrice }}</view>
			</view>
			<view class="shop_phone" v-if="!orderContents.specialOrder">
				<button @click="onCall(orderContents.shopPhone)">
					<image src="../../../static/icon/orderdetails_phone.png" mode="aspectFit"></image>
					<text>联系客服</text>
				</button>
				<button v-if="module.customerService" @click="onGoService">
					<image src="../../../static/icon/ic_order_agent.png" mode="aspectFit"></image>
					<text>联系商家</text>
				</button>
			</view>
		</view>
		<view class="total_info_box">
			<!-- <view class="title">订单信息</view> -->
			<view class="info" v-for="(item, index) in orderContents.orderInfo" :key="index">
				<text>{{ item.desc }}</text>
				<view v-if="item.desc == '订单编号'" @click="onCopy(item.descValue)">
					{{ item.descValue }}
                    <!-- #ifndef H5 -->
					<button class="copy">复制</button>
                    <!-- #endif -->
				</view>
				<view v-else>{{ item.descValue }}</view>
			</view>
		</view>
		<view class="total_info_box" v-if="orderContents.distributionInfo">
			<!-- <view class="title">配送信息</view> -->
			<view class="info">
				<text>物流方式</text>
				<view>{{ orderContents.distributionInfo.distributionMethod }}</view>
			</view>
			<view class="info" v-if="orderContents.distributionInfo.distributionUserName">
				<text>收货人</text>
				<view>{{ orderContents.distributionInfo.distributionUserName }}</view>
			</view>
			<view class="info" v-if="orderContents.distributionInfo.distributionPhone">
				<text>收货手机号</text>
				<view>{{ orderContents.distributionInfo.distributionPhone }}</view>
			</view>
			<view class="info" v-if="orderContents.distributionInfo.distributionAddress">
				<text>收货地址</text>
				<view>{{ orderContents.distributionInfo.distributionAddress }}</view>
			</view>
			<view class="info" v-if="orderContents.distributionInfo.reserveTime">
				<text>预约时间</text>
				<view>{{ orderContents.distributionInfo.reserveTime }}</view>
			</view>
			<view class="info" v-if="orderContents.distributionInfo.userPhone">
				<text>预留手机号</text>
				<view>{{ orderContents.distributionInfo.userPhone }}</view>
			</view>
			<view class="info" v-if="orderContents.distributionInfo.dutyName">
				<text>自提点负责人姓</text>
				<view>{{ orderContents.distributionInfo.dutyName }}</view>
			</view>
			<view class="info" v-if="orderContents.distributionInfo.dutyPhone">
				<text>自提点负责人手机号</text>
				<view>{{ orderContents.distributionInfo.dutyPhone }}</view>
			</view>
			<view class="info" v-if="orderContents.distributionInfo.extractRegionStr">
				<text>自提地点</text>
				<view>{{ orderContents.distributionInfo.extractRegionStr }}</view>
			</view>
			<view class="info">
				<text>留言</text>
				<view>{{ orderContents.distributionInfo.remark }}</view>
			</view>
		</view>
		<view class="total_info_box" v-if="orderContents.orderRecommendUserBO">
			<view class="info">
				<text>推荐人</text>
				<view>{{ orderContents.orderRecommendUserBO.phone }}({{ orderContents.orderRecommendUserBO.nickName }})</view>
			</view>
		</view>
		<view class="but_box">
			<button v-if="orderContents.orderStatus == 1001" @click="onCancel">取消订单</button>
			<button v-if="orderContents.orderStatus == 1002 || orderContents.orderStatus == 1401 || orderContents.orderStatus == 1402 || orderContents.orderStatus == 1502"
			 @click="onDelete">
				删除订单
			</button>
			<button v-if="orderContents.orderStatus == 1001" class="active" @click="onPay">去支付</button>
			<button v-if="module.afterSale && orderContents.orderStatus == 1201 && orderContents.orderType !== 2601" class="active" @click="onRefund">申请退款</button>
			<button v-if="orderContents.orderStatus == 1301" class="active" @click="onConfirmReceipt">{{ orderContents.logistics ? '确认收货' : '确认自提' }}</button>
			<button v-if="orderContents.logistics && (orderContents.orderStatus == 1301 || orderContents.orderStatus == 1401 || orderContents.orderStatus == 1402)"
			 class="active" @click="onPageJump('/pages/my/order/logistics?orderNo=' + orderNo)">
				查看物流
			</button>
			<button v-if="orderContents.orderStatus == 1401" class="active" @click="onPageJump('/pages/my/order/orderAssess?orderNo=' + orderNo)">去评价</button>
			<button v-if="module.afterSale && orderContents.orderStatus == 1501" class="active" @click="onCancelRefund">取消售后</button>
			<button v-if="orderContents.orderStatus == 1501 || orderContents.orderStatus == 1503" class="active" @click="onCall(serverPhone)">联系客服</button>
		</view>
	</view>
</template>

<script>
	import {
		setPayAssign
	} from '@/config/utils';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				// 当前订单号
				orderNo: '',
				// 当前订单内容
				orderContents: {
					orderStatusStr: '',
					shopName: '',
					shopLogo: '',
					goodsList: [{
						afterSaleBtn: false,
						goodsImg: '',
						goodsName: '',
						goodsSpecName: '',
						goodsNum: '',
						goodsPrice: '',
						goodsStatusStr: ''
					}],
					priceLogistics: '¥ 0.0',
					discounTotalPrice: '¥ 0.0',
					payPrice: '¥ 0.0',
					priceTotal: '¥ 0.0',
					shopPhone: '',
					logisticsUrl: '',
					orderInfo: [{
							desc: '',
							descValue: ''
						},
						{
							desc: '',
							descValue: ''
						}
					],
					distributionInfo: {
						distributionMethod: '',
						distributionUserName: '',
						distributionPhone: '',
						distributionAddress: '',
						serveDate: null,
						seatNo: null,
						remark: ''
					},
					afterSaleInfo: null,
					orderRecommendUserBO: {
						phone: '',
						nickName: ''
					}
				},
				module: {}
			};
		},
		computed: {
			...mapState(['serverPhone'])
		},
		//第一次加载
		onLoad(e) {
			this.module = this.$base.module;
			if (e.orderNo) {
				this.orderNo = e.orderNo;
			}
			this.getServerPhone();
		},
		//页面显示
		onShow() {
			this.loadData();
		},
		//方法
		methods: {
			...mapMutations(['setServerPhone']),
			//获取客服电话
			getServerPhone() {
				if (!this.serverPhone) {
					this.$http.get('api/open/v1/conf').then(res => {
						this.setServerPhone(res.aboubUs.serverPhone);
					});
				}
			},
			// 进入客服
			onGoService() {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: '/pages/message/serviceChat?shopType=1501&objId=' + this.orderContents.shopId + '&roomName=' + this.orderContents
							.shopName
					});
				});
			},
			onCopy(data) {
				if (data) {
					uni.setClipboardData({
						data: data,
						success: function() {
							uni.showToast({
								title: '复制成功'
							});
						}
					});
				}
			},
			//跳转页面
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			//拨打电话
			onCall(phone) {
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone
					});
				}
			},
			// 获取数据
			loadData() {
				this.$http
					.get('api/order/mall/v1/order_info', {
						orderNo: this.orderNo
					})
					.then(data => {
						this.orderContents = data;
					});
			},
			//取消订单
			onCancel() {
				uni.showModal({
					title: '提示',
					content: '确定要取消此订单吗？',
					success: res => {
						if (res.confirm) {
							this.$http
								.get('api/order/v2/cancel_or_confirm', {
									orderNo: this.orderNo,
									operateStatus: 1002
								})
								.then(data => {
									uni.showToast({
										title: '取消订单成功!',
										icon: 'none'
									});
									// this.orderContents.orderStatus = 1002;
									// this.orderContents.orderStatusStr = '已取消';
									this.loadData();
								});
						}
					}
				});
			},
			//删除订单
			onDelete() {
				uni.showModal({
					title: '提示',
					content: '确定要删除此订单吗？',
					success: res => {
						if (res.confirm) {
							this.$http
								.get('api/order/v2/cancel_or_confirm', {
									orderNo: this.orderNo,
									operateStatus: 1000
								})
								.then(data => {
									uni.showToast({
										title: '删除订单成功!',
										icon: 'none'
									});
									uni.navigateBack();
								});
						}
					}
				});
			},
			//去支付
			onPay() {
				//支付
				setPayAssign({
						orderNo: this.orderNo,
						title: '商品订单',
						price: this.orderContents.payPrice
					},
					res => {
						if (res.success) {
							this.loadData();
						} else {
							uni.showToast({
								title: '支付失败！',
								icon: 'none'
							});
						}
					}
				);
			},
			//确认收货
			onConfirmReceipt() {
				uni.showModal({
					title: '提示',
					content: '确定收到此商品？？',
					success: res => {
						if (res.confirm) {
							this.$http
								.get('api/order/v2/cancel_or_confirm', {
									orderNo: this.orderNo,
									operateStatus: 1301
								})
								.then(data => {
									uni.showToast({
										title: '确认收货成功!',
										icon: 'none'
									});
									// this.orderContents.orderStatus = 1401;
									// this.orderContents.orderStatusStr = '待评价';
									this.loadData();
								});
						}
					}
				});
			},
			//取消退款
			onCancelRefund() {
				uni.showModal({
					title: '提示',
					content: '确定要取消退款吗？',
					success: res => {
						if (res.confirm) {
							this.$http
								.get('api/order/v2/cancel_or_confirm', {
									orderNo: this.orderNo,
									operateStatus: 1500
								})
								.then(data => {
									uni.showToast({
										title: '取消退款成功!',
										icon: 'none'
									});
									this.loadData();
								});
						}
					}
				});
			},
			//取消售后
			onCancelAfterSale(index) {
				uni.showModal({
					title: '提示',
					content: '确定要取消售后吗？',
					success: res => {
						if (res.confirm) {
							let item = this.orderContents.goodsList[index];
							this.$http
								.get('api/order/v2/cancel_or_confirm', {
									orderNo: this.orderNo,
									operateStatus: 1500,
									goodsId: item.goodsId,
									goodsSpecId: item.goodsSpecId
								})
								.then(data => {
									uni.showToast({
										title: '取消售后成功!',
										icon: 'none'
									});
									// this.orderContents.goodsList[index].canRefund = true;
									this.loadData();
								});
						}
					}
				});
			},
			//申请退款
			onRefund() {
				uni.navigateTo({
					url: '/pages/my/order/refund?type=1409&orderNo=' + this.orderNo
				});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.order_detail_box {
		padding-bottom: 120rpx;
	}

	.order_status {
		height: 80rpx;
		line-height: 80rpx;
		background-color: $themeColor;
		border-radius: 6rpx;
		color: #fff;
		font-size: 32rpx;
		padding-left: 30rpx;
		margin: 20rpx 30rpx 0 30rpx;
	}

	.shop_goods_box {
		background-color: #ffffff;
		border-radius: 8rpx;
		margin: 20rpx 30rpx 0 30rpx;

		.shop_info {
			padding: 34rpx 30rpx 15rpx 30rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;

			&:after {
				content: '';
				@include bis('../../../static/icon/icon_enter.png');
				width: 14rpx;
				height: 24rpx;
				margin-left: 20rpx;
			}
		}

		.goods_item {
			padding: 20rpx 30rpx 20rpx 30rpx;
			display: flex;

			.goods_img {
				width: 160rpx;
				height: 160rpx;
				flex-shrink: 0;
			}

			.info_box {
				width: calc(100% - 160rpx);
				padding-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
				}

				.specification_num_box {
					margin-top: 11rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.specification {
						font-size: 24rpx;
						color: #999999;
					}

					.num {
						font-size: 24rpx;
						color: #333333;
					}
				}

				.price {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 15rpx;

					text {
						font-size: 28rpx;
						color: #333333;
					}

					button {
						width: 120upx;
						height: 50upx;
						line-height: 50upx;
						background-color: #ffffff;
						border-radius: 6upx;
						border: solid 1upx #e5e5e5;
						font-size: 24upx;
						color: #333333;
					}
				}
			}
		}
	}

	.order_info_box {
		background-color: #ffffff;
		border-radius: 8rpx;
		margin: 20rpx 30rpx 0 30rpx;
		padding: 0 30rpx;

		.cell_list {
			padding-left: 0;
			padding-right: 0;

			&.merge {
				padding-top: 0;
			}

			.cell_right {
				&.red {
					color: #ff5554;
				}
			}
		}

		.shop_phone {
			display: flex;
			justify-content: space-around;
			padding: 30rpx 0;

			button {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #333333;
				width: 185rpx;
				height: 51rpx;
				border-radius: 6rpx;
				border: solid 2rpx #e5e5e5;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.total_info_box {
		background-color: #ffffff;
		border-radius: 8rpx;
		margin: 20rpx 30rpx 0 30rpx;
		padding: 20rpx 30rpx;

		.title {
			font-size: 32rpx;
			color: #333333;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			&:before {
				content: '';
				margin-right: 20rpx;
				width: 4rpx;
				height: 30rpx;
				background-color: $themeColor;
			}
		}

		.info {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>text {
				font-size: 24rpx;
				color: #333333;
				flex-shrink: 0;
				margin-right: 30rpx;
			}

			>view {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 24rpx;
				color: #333333;

				.copy {
					margin-left: 20rpx;
					padding: 0rpx 10rpx;
					line-height: 32rpx;
					height: 36rpx;
					border-radius: 6rpx;
					font-size: 24rpx;
					background-color: $themeColor;
					color: #fff;
				}
			}
		}
	}

	.but_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 30rpx;

		button {
			min-width: 160rpx;
			height: 60rpx;
			padding: 0 20rpx;
			border-radius: 8rpx;
			background-color: #f7f7f7;
			font-size: 28rpx;
			color: #333333;
			margin-left: 30rpx;
			line-height: 60rpx;
            margin-top: 14rpx;
            margin-bottom: 14rpx;
			&.active {
				@include theme('gradient_bg');
				color: #ffffff;
				border: none;
			}
		}
	}
</style>
